<template>
    <!-- 周边设备弹框 -->
    <div
        :class="
            'peripherals-wrap dialog-wrap ' +
                ($Ctl.isCs(true) ? 'gradation-bg' : 'bg')
        "
    >
        <div class="device-title dialog-title">
            周边设备
            <div class="tab-list">
                <div
                    class="tab-item"
                    :class="{ 'is-active': activeTabName == 'first' }"
                    @click="tabClick('first')"
                >
                    10米
                </div>
                <div
                    class="tab-item"
                    :class="{ 'is-active': activeTabName == 'second' }"
                    @click="tabClick('second')"
                >
                    50米
                </div>
                <div
                    class="tab-item"
                    :class="{ 'is-active': activeTabName == 'threed' }"
                    @click="tabClick('threed')"
                >
                    150米
                </div>
            </div>
        </div>
        <div class="peripherals-content">
            <div class="tab-item-content">
                <el-collapse accordion>
                    <template v-for="(item, index) in deviceList">
                        <el-collapse-item :key="index">
                            <template slot="title">
                                <i class="header-icon el-icon-info"></i
                                >{{ item.name
                                }}<span class="device-num">{{ item.size }}</span
                                >个
                            </template>
                            <div class="periphery-device-list">
                                <div
                                    class="periphery-device-item"
                                    v-for="(obj, i) in item.list"
                                    :key="i"
                                    @click="jumpDeviceDetail(obj)"
                                >
                                    <!--<span class="device-state">{{ obj.status }}</span>-->
                                    <i
                                        class="el-icon el-icon-location"
                                        @click="shoudingwei(obj)"
                                    ></i
                                    ><span class="device-name">{{
                                        obj.name
                                    }}</span>
                                </div>
                            </div>
                        </el-collapse-item>
                    </template>
                </el-collapse>
            </div>
        </div>
    </div>
</template>
<script>
import { getMarkByDistance } from "@/api/gis";
import { getMarkDetail } from "@/api/markInfo3d";

export default {
    props: {
        parames: {
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            activeTabName: "first",
            deviceList: [],
            distance: 10, // 距离(米)
            location: this.parames.location || "", // 中心点位置
            orgId: this.parames.orgId || localStorage.getItem("ilinkBs_orgIds"), // 联网单位类
            mapType: localStorage.getItem("ilinkBs_currentMapType")
        };
    },
    created() {
        let that = this;
        if (!that.parames.location) {
            //获取中心点设备信息
            getMarkDetail({
                id: that.parames.id,
                dType: that.$store.state.currentMapType == 4 ? 2 : that.mapType
            }).then(res => {
                that.location = res.data.mapLocation;
                that.getDeviceData();
            });
        } else {
            that.getDeviceData();
        }
    },
    methods: {
        // tab点击
        tabClick(type) {
            this.activeTabName = type;
            if (type == "second") {
                this.distance = 50;
            } else if (type == "threed") {
                this.distance = 150;
            } else {
                this.distance = 10;
            }
            this.getDeviceData();
        },
        // 获取周边设备
        getDeviceData() {
            let that = this;
            that.$Ctl.loading(1, 10000);
            let _param = {
                mapLoaction: that.location || "", // 中心点位置
                orgId: that.orgId || "", // 联网单位类
                distance: that.distance, // 距离
                dtype: that.mapType, // 地图类型
                type: that.bsConfig.Docker
            };
            if (that.mapType == 2) {
                if (that.location) {
                    _param.indoorId =
                        JSON.parse(that.location)[0].indoorId || ""; // 室内地图楼层
                }
                _param.indoorMapId = localStorage.getItem(
                    "ilinkBs_fIndoorMapId"
                ); // 室内地图楼层
            }
            getMarkByDistance(_param).then(res => {
                that.$Ctl.loading(0);
                if (res.status === 200) {
                    that.deviceList = res.data;
                    that.$Ctl.drawPeriphery(
                        that.location,
                        that.distance,
                        that.deviceList
                    );
                }
            });
        },
        jumpDeviceDetail(obj) {
            let that = this;
            if (!that.$Ctl.getClickEnabel(1)) return;
            if (obj.type == 22) {
                //巡检点位
                that.$Ctl.openPopup("PatrolPoint", obj.id);
            } else if (obj.type == 3 || obj.type == 4) {
                //视频
                that.$Ctl.getVideoDetail(obj.id);
            } else {
                //常规探测器集合
                that.$Ctl.openPopup("DeviceDetails", obj.id);
            }
            event.stopPropagation();
        },
        shoudingwei(obj) {
            let that = this;
            that.$Ctl.fixedPosition(obj, 1);
            event.stopPropagation();
        }
    }
};
</script>

<style lang="scss">
.peripherals-wrap {
    .device-title {
        .tab-list {
            margin-left: 20px;
            display: flex;
            width: 200px;
            font-size: 16px;
            justify-content: space-around;
            cursor: pointer;
            .tab-item.is-active {
                border-bottom: 2px solid #4699ff;
            }
        }
    }
    .peripherals-content {
        margin-top: 25px;
        height: 290px;
        overflow-y: auto;
        .el-tabs__header {
            .el-tabs__item {
                color: #a3bedd;
                &.is-active {
                    color: #409eff;
                }
            }
        }
        .tab-item-content {
            .el-collapse {
                border: none;
            }
            .el-collapse-item__header,
            .el-collapse-item__wrap {
                background-color: unset;
                color: #fff;
                border: none;
                font-size: 18px;
            }
            .el-collapse-item__header {
                .header-icon {
                    margin-right: 10px;
                }
                .device-num {
                    margin-left: 30px;
                }
            }
            .el-collapse-item__wrap {
                .el-collapse-item__content {
                    padding-left: 40px;
                    padding-bottom: 0;
                    color: #fff;
                    font-size: 18px;
                    .periphery-device-list {
                        .periphery-device-item {
                            margin-bottom: 10px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            cursor: pointer;
                            .device-state {
                                margin-right: 18px;
                                padding: 7px 11px;
                                background-color: #ce334f;
                                border-radius: 8px;
                            }
                            .el-icon {
                                padding-right: 10px;
                                &:hover {
                                    color: #4ca4fe;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
